<template>
    <PageLayout>
        <div style="width: 100%">
            <div class="search-h">
                <div style="flex: 1">
                    <a-form
                        layout="horizontal"
                        :form="queryParams"
                    >
                        <a-row>
                            <a-col
                                :md="10"
                                :sm="24"
                            >
                                <a-form-item
                                    label="名称"
                                    :label-col="{ span: 5 }"
                                    :wrapper-col="{ span: 18, offset: 1 }"
                                >
                                    <a-input
                                        v-model="queryParams.matter"
                                        placeholder="输入名称"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col
                                :md="10"
                                :sm="24"
                            >
                                <a-form-model-item
                                    label="业务类型"
                                    :label-col="{ span: 5 }"
                                    :wrapper-col="{ span: 18, offset: 1 }"
                                >
                                    <a-select
                                        v-model="queryParams.type"
                                        placeholder="请选择业务类型"
                                    >
                                        <a-select-option
                                            v-for="item in typeList"
                                            :key="item.label"
                                            :value="item.label"
                                        >
                                            {{ item.label }}
                                        </a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
                <div>
                    <a-button
                        type="primary"
                        @click="query"
                    >
                        查询
                    </a-button>
                    <!-- <a-button
                        style="margin-left: 8px"
                        @click="reset"
                    >
                        重置
                    </a-button> -->
                </div>
            </div>
            <div class="btn-group">
                <a-button @click="add">
                    新增
                </a-button>
                <a-button @click="del">
                    删除
                </a-button>
                <a-button @click="reset">
                    重置
                </a-button>
            </div>
            <a-table
                ref="TableInfo"
                row-key="matterId"
                :row-selection="{
                    selectedRowKeys: selectedRowKeys,
                    onChange: onSelectChange,
                }"
                :scroll="{ x: 900 }"

                :columns="columns"
                :data-source="dataSource"
                :pagination="pagination"
                @change="handleTableChange"
            >
                <template />
                <template
                    slot="status"
                    slot-scope="rows, record"
                >
                    <a-switch
                        :checked="Boolean(record.status)"
                        checked-children="已推送"
                        un-checked-children="未推送"
                        @change="onSwitch($event,record)"
                    />
                </template>
                <template
                    slot="operation"
                    slot-scope="rows, record"
                >
                    <a-popover trigger="click">
                        <template
                            slot="content"
                        >
                            <a-spin
                                v-if="imgLoading"
                                style="width: 100px; height: 100px; line-height: 100px"
                            >
                                <a-icon
                                    slot="indicator"
                                    type="loading"
                                    style="font-size: 24px; "
                                    spin
                                />
                            </a-spin>
                            <img
                                v-else
                                width="100px"
                                height="100px"
                                :src="qrcodeImg"
                            >
                        </template>
                        <a-icon
                            type="tablet"
                            itle="发布"
                            style="color: #54c61c"
                            @click="review(record)"
                        />
                    </a-popover>
                    &nbsp;
                    <a-icon
                        type="setting"
                        title="设置"
                        theme="twoTone"
                        style="color: #1890ff"
                        @click="edit(record)"
                    />&nbsp;
                    <a-icon
                        type="delete"
                        title="删除"
                        theme="twoTone"
                        two-tone-color="#ff3029"
                        @click="del(record)"
                    />
                </template>
            </a-table>

            <!-- 新增-编辑 -->
            <a-modal
                v-model="visible"
                :title="title"
                width="980px"
            >
                <a-form-model
                    ref="ruleForm"
                    layout="inline"
                    :model="form"
                    :rules="rules"
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                >
                    <a-form-model-item
                        label="承办层"
                        prop="organizer"
                    >
                        <a-input
                            v-model="form.organizer"
                            placeholder="请输入承办层"
                        />
                        <!-- <a-select
                            v-model.trim="form.organizer"
                            placeholder="请选择承办层"
                        >
                            <a-select-option
                                v-for="item in organizerList"
                                :key="item.label"
                                :value="item.label"
                            >
                                {{ item.label }}
                            </a-select-option>
                        </a-select> -->
                    </a-form-model-item>
                    <a-form-model-item
                        label="业务类型"
                        prop="type"
                    >
                        <a-select
                            v-model="form.type"
                            placeholder="请选择业务类型"
                        >
                            <a-select-option
                                v-for="item in typeList"
                                :key="item.label"
                                :value="item.label"
                            >
                                {{ item.label }}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item
                        label="承办部门"
                        prop="deptName"
                    >
                        <a-input
                            v-model="form.deptName"
                            placeholder="请输入承办部门"
                        />
                    </a-form-model-item>
                    <a-form-model-item
                        label="事项"
                        prop="matter"
                    >
                        <a-input
                            v-model="form.matter"
                            placeholder="请输入事项"
                        />
                    </a-form-model-item>
                    <a-form-model-item
                        label="办理时限"
                        prop="endTime"
                    >
                        <a-input
                            v-model="form.endTime"
                            placeholder="请输入办理时限"
                        />
                    </a-form-model-item>
                    <a-form-model-item
                        label="联系电话"
                        prop="phone"
                    >
                        <a-input
                            v-model="form.phone"
                            type="number"
                            placeholder="请输入联系电话"
                        />
                    </a-form-model-item>
                    <a-form-model-item
                        label="办理指引"
                        prop="content"
                        style="width: 45%"
                        :label-col="{ span: 6 }"
                        :wrapper-col="{ span: 18 }"
                    >
                        <a-textarea
                            v-model="form.content"
                            placeholder="请输入办理指引"
                        />
                    </a-form-model-item>
                    <a-form-model-item
                        label="备注"
                        prop="notes"
                        style="width: 45%"
                        :label-col="{ span: 6 }"
                        :wrapper-col="{ span: 18 }"
                    >
                        <a-textarea
                            v-model="form.notes"
                            placeholder="请输入备注"
                        />
                    </a-form-model-item>
                    <a-form-model-item
                        label="网办渠道"
                        prop="online"
                        style="width: 45%"
                        :label-col="{ span: 6 }"
                        :wrapper-col="{ span: 18 }"
                    >
                        <a-input
                            v-model="form.online"
                            placeholder="请输入网办渠道"
                        />
                    </a-form-model-item>
                    <a-form-model-item
                        label="办理地点"
                        prop="address"
                        style="width: 45%"
                        :label-col="{ span: 6 }"
                        :wrapper-col="{ span: 18 }"
                    >
                        <a-textarea
                            v-model="form.address"
                            placeholder="请输入办理地点"
                        />
                    </a-form-model-item>
                </a-form-model>
                <template slot="footer">
                    <a-button
                        type="primary"
                        @click="handleOk"
                    >
                        确定
                    </a-button>
                    <a-button @click="handleCancel">
                        取消
                    </a-button>
                </template>
            </a-modal>
        </div>
    </PageLayout>
</template>
<script>
import {typeList} from './data';
import PageLayout from '@/views/common/PageLayout';

export default {
    components: {PageLayout},
    data() {

        return {
            imgLoading: false,
            qrcodeImg: '',
            typeList,
            dataList: [],
            organizerList: [
                {
                    value: '0',
                    label: '镇（街）',
                    id: 0
                },
                {
                    value: '1',
                    label: '区',
                    id: 1
                }
            ],
            deptNameList: [
                {
                    value: '0',
                    label: '经济发展和市场监管办公室',
                    id: 0
                },
                {
                    value: '1',
                    label: '综合保障中心',
                    id: 1
                },
                {
                    value: '2',
                    label: '公共服务办(民政组)',
                    id: 2
                },
                {
                    value: '3',
                    label: '社会事务综合服务中心(劳动组)',
                    id: 3
                },
                {
                    value: '4',
                    label: '公共服务办(计生组)',
                    id: 4
                },
                {
                    value: '5',
                    label: '大岗派出所',
                    id: 5
                }
            ],
            visible: false,
            title: '新增',
            // queryParams: {
            // },
            queryParams: {
                current: 1,
                pageSize: 10,
                total: 0,
                matter: '',
                type: '',
                'show-size-changer': true
            },
            addForm: {},
            form: {
                status: 0,
                type: undefined,
                organizer: undefined,
                deptName: undefined,
                matter: '',
                endTime: '',
                phone: '',
                name: '',
                notes: '',
                address: '',
                online: ''
            },
            rules: {
                type: [{ required: true, message: '请选择业务类型', trigger: 'blur' }],
                organizer: [{ required: true, message: '请选择承办层', trigger: 'blur' }],
                deptName: [{ required: true, message: '请选择承办部门', trigger: 'blur' }],
                matter: [{ required: true, message: '请输入事项', trigger: 'blur' }],
                endTime: [{ required: true, message: '请输入办理时限', trigger: 'blur' }],
                phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }]
            },
            dataSource: [],
            filteredInfo: null,
            sortedInfo: null,
            paginationInfo: null,
            pagination: {
                pageSizeOptions: ['10', '20', '30', '40', '100'],
                defaultCurrent: 1,
                defaultPageSize: 10,
                showQuickJumper: true,
                showSizeChanger: true,
                showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
            },
            selectedRowKeys: [], // Check here to configure the default column
            loading: false
        };
    },
    computed: {
        columns() {
            let { sortedInfo, filteredInfo } = this;
            sortedInfo = sortedInfo || {};
            filteredInfo = filteredInfo || {};
            return [{
                title: '承办层',
                dataIndex: 'organizer',
                width: 150

            },
            {
                title: '业务类型',
                dataIndex: 'type',
                width: 150
            },
            {
                title: '承办部门',
                dataIndex: 'deptName',
                width: 150

            },
            {
                title: '事项',
                width: 150,
                dataIndex: 'matter'
            },
            {
                title: '办理时限',
                dataIndex: 'endTime',
                width: 120

            },
            {
                title: '联系电话',
                width: 120,
                dataIndex: 'phone'
            },
            {
                title: '状态',
                key: 'status',
                scopedSlots: { customRender: 'status' },
                dataIndex: 'status',
                width: 150
            },
            {
                title: '创建时间',
                dataIndex: 'createTime',
                sorter: true,
                sortOrder: sortedInfo.columnKey === 'createTime' && sortedInfo.order,
                width: 120

            },

            {
                title: '更新时间',
                dataIndex: 'updateTime',
                sorter: true,
                sortOrder: sortedInfo.columnKey === 'updateTime' && sortedInfo.order,
                width: 120

            },
            {
                title: '操作',
                key: 'operation',
                scopedSlots: { customRender: 'operation' },
                dataIndex: 'operation',
                width: 150,
                fixed: 'right'
            }];
        }
    },
    watch: {
        visible(val) {
            if (!val) {
                this.$refs.ruleForm.resetFields();
            }
        }
    },
    created() {
        this.fetch();
    },
    methods: {
        reset() {
            this.queryParams = this.$options.data().queryParams;
            this.fetch(this.queryParams);
        },
        async review(record) {
            this.imgLoading = true;
            let res = await this.$api.matter.qrcode({
                'page': 'pages/detail/detail',
                'sceneStr': record.matterId
            });
            this.qrcodeImg = res;
            this.imgLoading = false;

            console.log('结果', res);
        },
        async onSwitch(e, v) {
            v.status = Number(!v.status);
            let res = await this.$api.matter.save(v);
            if (res.data.code == '200') {
                this.$message.success('操作成功！');
            }
        },
        async cancel(record) {
            record.status = Number(!record.status);
            let res = await this.$api.matter.save(record);
            if (res.data.code === '200') {
                this.$message.warning('发布已取消');
            }
        },
        async status(record) {
            if (record.status) return;
            record.status = Number(!record.status);
            let res = await this.$api.matter.save(record);
            if (res.data.code === '200') {
                this.$message.success('发布成功！');
            }
        },
        updateData() {},
        delData(item, index) {
            this.dataList.splice(index, 1);
        },
        addData() {
            let item = {
                index: '',
                content: '',
                id: this.dataList.length + 1
            };
            this.dataList.push(item);
        },
        handleTableChange(pagination, filters, sorter) {
            // 将这三个参数赋值给Vue data，用于后续使用
            this.paginationInfo = pagination;
            this.filteredInfo = filters;
            this.sortedInfo = sorter;
            this.fetch({
                sortField: sorter.field,
                sortOrder: sorter.order,
                ...this.queryParams,
                ...filters
            });
        },
        query() {
            this.fetch(this.queryParams);
        },

        onSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys;
        },
        add() {
            this.visible = true;
            this.title = '新增';
        },
        edit(record) {
            this.visible = true;
            this.title = '编辑';
            this.$api.matter.info({ matterId: record.matterId }).then(res => {
                this.form = res.data.data;

            });
        },
        del(record) {
            let list = record.matterId ? [record.matterId] : this.selectedRowKeys;
            this.$confirm({
                title: '提示',
                content: '确定删除操作数据?',
                onOk: () => {
                    this.$api.matter.del(list).then(res => {
                        if (res.data.code === 200) {
                            this.$message.success(res.data.message);
                            this.fetch();
                        } else {
                            this.$message.warn(res.data.message);
                        }
                    });
                }
            });
        },
        handleOk() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    this.$api.matter.save(this.form).then(res => {
                        if (res.data.code == 200) {
                            this.fetch();
                            this.visible = false;
                            this.handleCancel();
                            this.$message.success(res.data.message);
                        } else {
                            this.$message.warn(res.data.message);
                        }
                    }).finally(() => {
                        this.visible = false;
                    });
                }
            });
        },
        handleCancel() {
            this.form = this.$options.data().form;
            this.dataList = [];
            this.visible = false;
        },
        fetch(params = {}) {
            // 显示loading
            this.loading = true;
            if (this.paginationInfo) {
                // 如果分页信息不为空，则设置表格当前第几页，每页条数，并设置查询分页参数
                this.$refs.TableInfo.pagination.current = this.paginationInfo.current;
                this.$refs.TableInfo.pagination.pageSize = this.paginationInfo.pageSize;
                params.pageSize = this.paginationInfo.pageSize;
                params.pageNum = this.paginationInfo.current;
            } else {
                // 如果分页信息为空，则设置为默认值
                params.pageSize = this.pagination.defaultPageSize;
                params.pageNum = this.pagination.defaultCurrent;
            }
            this.$api.matter.list({
                ...params
            }).then((r) => {
                console.log('rrrr', r.data.data);
                let data = r.data;
                const pagination = { ...this.pagination };
                pagination.total = data.total;
                this.dataSource = data.data;
                this.pagination = pagination;
                // 数据加载完毕，关闭loading
                this.loading = false;
            });
        }
    }
};
</script>
<style lang="less" scoped>
tr {

	.icon-close {
		display: none;
	}
}

/deep/ tr:hover {

	.icon-close {
		display: inline-block;
	}
}

.search-h {
	display: flex;
	justify-content: space-between;
	margin: 10px 0 8px;

	/deep/ .ant-form-item {
		margin-bottom: 0px !important;
	}
}

/deep/ .ant-form-inline .ant-form-item {
	width: 30%;
}

.btn-group {
	margin-bottom: 12px;
}
</style>
